<template>
  <div class="video-detail-container">
    <el-container>
      <el-header class="bili-header fixed-header"><ScrollHeader :showMore="false" :isCategoryShow="false"/></el-header>
      <el-container class="video-container-v1">
        <div class="left-container scroll-sticky">
            <div class="video-info-container win">
              <div class="video-info-title">
                <div class="video-info-title-inner video-info-title-inner-overflow">
                <h1 class="video-title special-text-indent">{{videoInfo.title}}</h1>
                </div>
              </div>
              <div class="video-info-meta">
                <div class="video-info-detail-list video-info-detail-content">
                <div class="dm">
                  <svg class="dm-icon" style="width:21px;height:21px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" width="20" height="20"><path d="M10 4.040041666666666C7.897383333333334 4.040041666666666 6.061606666666667 4.147 4.765636666666667 4.252088333333334C3.806826666666667 4.32984 3.061106666666667 5.0637316666666665 2.9755000000000003 6.015921666666667C2.8803183333333333 7.074671666666667 2.791666666666667 8.471183333333332 2.791666666666667 9.998333333333333C2.791666666666667 11.525566666666668 2.8803183333333333 12.922083333333333 2.9755000000000003 13.9808C3.061106666666667 14.932983333333334 3.806826666666667 15.666916666666667 4.765636666666667 15.744683333333336C6.061611666666668 15.849716666666666 7.897383333333334 15.956666666666667 10 15.956666666666667C12.10285 15.956666666666667 13.93871666666667 15.849716666666666 15.234766666666667 15.74461666666667C16.193416666666668 15.66685 16.939000000000004 14.933216666666667 17.024583333333336 13.981216666666668C17.11975 12.922916666666667 17.208333333333332 11.526666666666666 17.208333333333332 9.998333333333333C17.208333333333332 8.470083333333333 17.11975 7.073818333333334 17.024583333333336 6.015513333333334C16.939000000000004 5.063538333333333 16.193416666666668 4.329865000000001 15.234766666666667 4.252118333333334C13.93871666666667 4.147016666666667 12.10285 4.040041666666666 10 4.040041666666666zM4.684808333333334 3.255365C6.001155 3.14862 7.864583333333334 3.0400416666666668 10 3.0400416666666668C12.13565 3.0400416666666668 13.999199999999998 3.148636666666667 15.315566666666667 3.2553900000000002C16.753416666666666 3.3720016666666672 17.890833333333333 4.483195 18.020583333333335 5.925965000000001C18.11766666666667 7.005906666666667 18.208333333333336 8.433 18.208333333333336 9.998333333333333C18.208333333333336 11.56375 18.11766666666667 12.990833333333335 18.020583333333335 14.0708C17.890833333333333 15.513533333333331 16.753416666666666 16.624733333333335 15.315566666666667 16.74138333333333C13.999199999999998 16.848116666666666 12.13565 16.95666666666667 10 16.95666666666667C7.864583333333334 16.95666666666667 6.001155 16.848116666666666 4.684808333333334 16.7414C3.2467266666666665 16.624750000000002 2.1092383333333338 15.513266666666667 1.9795200000000002 14.070383333333334C1.8823900000000002 12.990000000000002 1.7916666666666667 11.562683333333334 1.7916666666666667 9.998333333333333C1.7916666666666667 8.434066666666666 1.8823900000000002 7.00672 1.9795200000000002 5.926381666666667C2.1092383333333338 4.483463333333334 3.2467266666666665 3.371976666666667 4.684808333333334 3.255365z" fill="currentColor"></path><path d="M12.23275 9.1962C12.851516666666667 9.553483333333332 12.851516666666667 10.44665 12.232683333333332 10.803866666666666L9.57975 12.335600000000001C8.960983333333335 12.692816666666667 8.1875 12.246250000000002 8.187503333333334 11.531733333333333L8.187503333333334 8.4684C8.187503333333334 7.753871666666667 8.960983333333335 7.307296666666667 9.57975 7.66456L12.23275 9.1962z" fill="currentColor"></path></svg>
                  <div class="dm-text">{{videoInfo.viewCount}} </div>
                </div>
                <div class="dm item">
                 <svg class="dm-icon" style="width:21px;height:21px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" width="20" height="20"><path d="M10 4.040041666666666C7.897383333333334 4.040041666666666 6.061606666666667 4.147 4.765636666666667 4.252088333333334C3.806826666666667 4.32984 3.061106666666667 5.0637316666666665 2.9755000000000003 6.015921666666667C2.8803183333333333 7.074671666666667 2.791666666666667 8.471183333333332 2.791666666666667 9.998333333333333C2.791666666666667 11.525566666666668 2.8803183333333333 12.922083333333333 2.9755000000000003 13.9808C3.061106666666667 14.932983333333334 3.806826666666667 15.666916666666667 4.765636666666667 15.744683333333336C6.061611666666668 15.849716666666666 7.897383333333334 15.956666666666667 10 15.956666666666667C12.10285 15.956666666666667 13.93871666666667 15.849716666666666 15.234766666666667 15.74461666666667C16.193416666666668 15.66685 16.939000000000004 14.933216666666667 17.024583333333336 13.981216666666668C17.11975 12.922916666666667 17.208333333333332 11.526666666666666 17.208333333333332 9.998333333333333C17.208333333333332 8.470083333333333 17.11975 7.073818333333334 17.024583333333336 6.015513333333334C16.939000000000004 5.063538333333333 16.193416666666668 4.329865000000001 15.234766666666667 4.252118333333334C13.93871666666667 4.147016666666667 12.10285 4.040041666666666 10 4.040041666666666zM4.684808333333334 3.255365C6.001155 3.14862 7.864583333333334 3.0400416666666668 10 3.0400416666666668C12.13565 3.0400416666666668 13.999199999999998 3.148636666666667 15.315566666666667 3.2553900000000002C16.753416666666666 3.3720016666666672 17.890833333333333 4.483195 18.020583333333335 5.925965000000001C18.11766666666667 7.005906666666667 18.208333333333336 8.433 18.208333333333336 9.998333333333333C18.208333333333336 11.56375 18.11766666666667 12.990833333333335 18.020583333333335 14.0708C17.890833333333333 15.513533333333331 16.753416666666666 16.624733333333335 15.315566666666667 16.74138333333333C13.999199999999998 16.848116666666666 12.13565 16.95666666666667 10 16.95666666666667C7.864583333333334 16.95666666666667 6.001155 16.848116666666666 4.684808333333334 16.7414C3.2467266666666665 16.624750000000002 2.1092383333333338 15.513266666666667 1.9795200000000002 14.070383333333334C1.8823900000000002 12.990000000000002 1.7916666666666667 11.562683333333334 1.7916666666666667 9.998333333333333C1.7916666666666667 8.434066666666666 1.8823900000000002 7.00672 1.9795200000000002 5.926381666666667C2.1092383333333338 4.483463333333334 3.2467266666666665 3.371976666666667 4.684808333333334 3.255365z" fill="currentColor"></path><path d="M13.291666666666666 8.833333333333334L8.166666666666668 8.833333333333334C7.890526666666666 8.833333333333334 7.666666666666666 8.609449999999999 7.666666666666666 8.333333333333334C7.666666666666666 8.057193333333334 7.890526666666666 7.833333333333334 8.166666666666668 7.833333333333334L13.291666666666666 7.833333333333334C13.567783333333335 7.833333333333334 13.791666666666668 8.057193333333334 13.791666666666668 8.333333333333334C13.791666666666668 8.609449999999999 13.567783333333335 8.833333333333334 13.291666666666666 8.833333333333334z" fill="currentColor"></path><path d="M14.541666666666666 12.166666666666666L9.416666666666668 12.166666666666666C9.140550000000001 12.166666666666666 8.916666666666666 11.942783333333333 8.916666666666666 11.666666666666668C8.916666666666666 11.390550000000001 9.140550000000001 11.166666666666668 9.416666666666668 11.166666666666668L14.541666666666666 11.166666666666668C14.817783333333335 11.166666666666668 15.041666666666668 11.390550000000001 15.041666666666668 11.666666666666668C15.041666666666668 11.942783333333333 14.817783333333335 12.166666666666666 14.541666666666666 12.166666666666666z" fill="currentColor"></path><path d="M6.5 8.333333333333334C6.5 8.609449999999999 6.27614 8.833333333333334 6 8.833333333333334L5.458333333333333 8.833333333333334C5.182193333333334 8.833333333333334 4.958333333333334 8.609449999999999 4.958333333333334 8.333333333333334C4.958333333333334 8.057193333333334 5.182193333333334 7.833333333333334 5.458333333333333 7.833333333333334L6 7.833333333333334C6.27614 7.833333333333334 6.5 8.057193333333334 6.5 8.333333333333334z" fill="currentColor"></path><path d="M7.750000000000001 11.666666666666668C7.750000000000001 11.942783333333333 7.526140000000001 12.166666666666666 7.25 12.166666666666666L6.708333333333334 12.166666666666666C6.432193333333334 12.166666666666666 6.208333333333334 11.942783333333333 6.208333333333334 11.666666666666668C6.208333333333334 11.390550000000001 6.432193333333334 11.166666666666668 6.708333333333334 11.166666666666668L7.25 11.166666666666668C7.526140000000001 11.166666666666668 7.750000000000001 11.390550000000001 7.750000000000001 11.666666666666668z" fill="currentColor"></path></svg>
                 <div class="dm-text">33 </div>
                </div>
                <div class="pubdate-ip ">
                  <div class="pubdate-ip-text">{{ videoInfo.publishTime }}</div>
                </div>
                <div class="copyright item">
                  <svg class="copyright-icon" style="width:16px;height:16px;" color="red" data-v-aed3e268="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16"><path d="M3.6893999999999996 5.1036666666666655C2.3498133333333335 7.12952 2.5688666666666666 9.875600000000002 4.346579999999999 11.653333333333332C6.1242600000000005 13.431066666666666 8.8704 13.650133333333333 10.896266666666664 12.310533333333334L3.6893999999999996 5.1036666666666655zM5.103626666666667 3.689440000000001L12.310599999999997 10.896333333333331C13.650066666666667 8.870466666666665 13.43113333333333 6.124313333333333 11.653400000000001 4.346606666666665C9.875666666666667 2.5689266666666666 7.129559999999999 2.349853333333333 5.103626666666667 3.689440000000001zM2.9323533333333334 13.067533333333337C0.13359999999999994 10.268866666666664 0.13359999999999994 5.731153333333332 2.9323533333333334 2.9324C5.731113333333333 0.1336399999999999 10.268799999999999 0.1336399999999999 13.0676 2.9324C15.866399999999995 5.731153333333332 15.866399999999995 10.268866666666664 13.0676 13.067533333333337C10.268799999999999 15.866333333333332 5.731113333333333 15.866333333333332 2.9323533333333334 13.067533333333337z" fill="currentColor"></path></svg>
                  <div class="copyright-text">
                    未经作者授权，禁止转载
                  </div>
                </div>
                </div>
              </div>
            </div>
            <div id="playerWrap" class="player-wrap">
              <div id="bilibili-player-placeholder">
              <div id="bilibili-player-placeholder-top">
                <video :src="videoInfo.playUrl" controls playsinline muted autoplay preload="none" width="100%"></video>
              </div>
              <div id="bilibili-player-placeholder-bottom">
                <div class="bpx-player-video-info">
                    2人正在观看，已填装33条弹幕
                </div>
                <div class="bpx-player-dm-root">
                 <svg xmlns="http://www.w3.org/2000/svg" style="width:26px;height:26px;" data-pointer="none" viewBox="0 0 24 24"><path  fill="#61666d" fill-rule="evenodd" d="M11.989 4.828c-.47 0-.975.004-1.515.012l-1.71-2.566a1.008 1.008 0 0 0-1.678 1.118l.999 1.5c-.681.018-1.403.04-2.164.068a4.013 4.013 0 0 0-3.83 3.44c-.165 1.15-.245 2.545-.245 4.185 0 1.965.115 3.67.35 5.116a4.012 4.012 0 0 0 3.763 3.363l.906.046c1.205.063 1.808.095 3.607.095a.988.988 0 0 0 0-1.975c-1.758 0-2.339-.03-3.501-.092l-.915-.047a2.037 2.037 0 0 1-1.91-1.708c-.216-1.324-.325-2.924-.325-4.798 0-1.563.076-2.864.225-3.904.14-.977.96-1.713 1.945-1.747 2.444-.087 4.465-.13 6.063-.131 1.598 0 3.62.044 6.064.13.96.034 1.71.81 1.855 1.814.075.524.113 1.962.141 3.065v.002c.01.342.017.65.025.88a.987.987 0 1 0 1.974-.068c-.008-.226-.016-.523-.025-.856v-.027c-.03-1.118-.073-2.663-.16-3.276-.273-1.906-1.783-3.438-3.74-3.507-.9-.032-1.743-.058-2.531-.078l1.05-1.46a1.008 1.008 0 0 0-1.638-1.177l-1.862 2.59c-.38-.004-.744-.007-1.088-.007h-.13Zm.521 4.775h-1.32v4.631h2.222v.847h-2.618v1.078h2.618l.003.678c.36.026.714.163 1.01.407h.11v-1.085h2.694v-1.078h-2.695v-.847H16.8v-4.63h-1.276a8.59 8.59 0 0 0 .748-1.42L15.183 7.8a14.232 14.232 0 0 1-.814 1.804h-1.518l.693-.308a8.862 8.862 0 0 0-.814-1.408l-1.045.352c.297.396.572.847.825 1.364Zm-4.18 3.564.154-1.485h1.98V8.294h-3.2v.98H9.33v1.43H7.472l-.308 3.453h2.277c0 1.166-.044 1.925-.12 2.277-.078.352-.386.528-.936.528-.308 0-.616-.022-.902-.055l.297 1.067.062.005c.285.02.551.04.818.04 1.001-.067 1.562-.419 1.694-1.057.11-.638.176-1.903.176-3.795h-2.2Zm7.458.11v-.858h-1.254v.858h1.254Zm-2.376-.858v.858h-1.199v-.858h1.2Zm-1.199-.946h1.2v-.902h-1.2v.902Zm2.321 0v-.902h1.254v.902h-1.254Z" clip-rule="evenodd"></path><path fill="#00AEEC" fill-rule="evenodd" d="M22.846 14.627a1 1 0 0 0-1.412.075l-5.091 5.703-2.216-2.275-.097-.086-.008-.005a1 1 0 0 0-1.322 1.493l2.963 3.041.093.083.007.005c.407.315 1 .27 1.354-.124l5.81-6.505.08-.102.005-.008a1 1 0 0 0-.166-1.295Z" clip-rule="evenodd"></path></svg>
                 <svg xmlns="http://www.w3.org/2000/svg" style="width:26px;height:26px;"  data-pointer="none" viewBox="0 0 24 24"><path fill-rule="evenodd" d="m15.645 4.881 1.06-1.473a.998.998 0 1 0-1.622-1.166L13.22 4.835a110.67 110.67 0 0 0-1.1-.007h-.131c-.47 0-.975.004-1.515.012L8.783 2.3A.998.998 0 0 0 7.12 3.408l.988 1.484c-.688.019-1.418.042-2.188.069a4.013 4.013 0 0 0-3.83 3.44c-.165 1.15-.245 2.545-.245 4.185 0 1.965.115 3.67.35 5.116a4.012 4.012 0 0 0 3.763 3.363c1.903.094 3.317.141 5.513.141a.988.988 0 0 0 0-1.975 97.58 97.58 0 0 1-5.416-.139 2.037 2.037 0 0 1-1.91-1.708c-.216-1.324-.325-2.924-.325-4.798 0-1.563.076-2.864.225-3.904.14-.977.96-1.713 1.945-1.747 2.444-.087 4.465-.13 6.063-.131 1.598 0 3.62.044 6.064.13.96.034 1.71.81 1.855 1.814.075.524.113 1.962.141 3.065v.002c.005.183.01.07.014-.038.004-.096.008-.189.011-.081a.987.987 0 1 0 1.974-.069c-.004-.105-.007-.009-.011.09-.002.056-.004.112-.007.135l-.002.01a.574.574 0 0 1-.005-.091v-.027c-.03-1.118-.073-2.663-.16-3.276-.273-1.906-1.783-3.438-3.74-3.507-.905-.032-1.752-.058-2.543-.079Zm-3.113 4.703h-1.307v4.643h2.2v.04l.651-1.234c.113-.215.281-.389.482-.509v-.11h.235c.137-.049.283-.074.433-.074h1.553V9.584h-1.264a8.5 8.5 0 0 0 .741-1.405l-1.078-.381c-.24.631-.501 1.23-.806 1.786h-1.503l.686-.305c-.228-.501-.5-.959-.806-1.394l-1.034.348c.294.392.566.839.817 1.35Zm-1.7 5.502h2.16l-.564 1.068h-1.595v-1.068Zm-2.498-1.863.152-1.561h1.96V8.289H7.277v.969h2.048v1.435h-1.84l-.306 3.51h2.254c0 1.155-.043 1.906-.12 2.255-.076.348-.38.523-.925.523-.305 0-.61-.022-.893-.055l.294 1.056.061.005c.282.02.546.039.81.039.991-.065 1.547-.414 1.677-1.046.11-.631.175-1.883.175-3.757H8.334Zm5.09-.8v.85h-1.188v-.85h1.187Zm-1.188-.955h1.187v-.893h-1.187v.893Zm2.322.007v-.893h1.241v.893h-1.241Zm.528 2.757a1.26 1.26 0 0 1 1.087-.627l4.003-.009a1.26 1.26 0 0 1 1.094.63l1.721 2.982c.226.39.225.872-.001 1.263l-1.743 3a1.26 1.26 0 0 1-1.086.628l-4.003.009a1.26 1.26 0 0 1-1.094-.63l-1.722-2.982a1.26 1.26 0 0 1 .002-1.263l1.742-3Zm1.967.858a1.26 1.26 0 0 0-1.08.614l-.903 1.513a1.26 1.26 0 0 0-.002 1.289l.885 1.492c.227.384.64.62 1.086.618l2.192-.005a1.26 1.26 0 0 0 1.08-.615l.904-1.518a1.26 1.26 0 0 0 .001-1.288l-.884-1.489a1.26 1.26 0 0 0-1.086-.616l-2.193.005Zm2.517 2.76a1.4 1.4 0 1 1-2.8 0 1.4 1.4 0 0 1 2.8 0Z" clip-rule="evenodd" fill="#61666d"></path></svg>
                  <div class="bpx-video-inputbar-wrap">
                    <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px;" xml:space="preserve" data-pointer="none" viewBox="0 0 22 22" ><path d="M17 16H5c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1zM6.96 15c.39 0 .74-.24.89-.6l.65-1.6h5l.66 1.6c.15.36.5.6.89.6.69 0 1.15-.71.88-1.34l-3.88-8.97C11.87 4.27 11.46 4 11 4s-.87.27-1.05.69l-3.88 8.97c-.27.63.2 1.34.89 1.34zM11 5.98 12.87 11H9.13L11 5.98z" fill="#61666d"></path></svg>
                    <input type="text" class="player-dm-input" placeholder="发个友善弹幕见证当下">
                    <div class="player-dm-hint">
                      <span>弹幕礼仪</span>
                      <svg xmlns="http://www.w3.org/2000/svg" style="width:16px;height:16px;" xml:space="preserve" data-pointer="none" viewBox="0 0 16 16"><path d="m9.188 7.999-3.359 3.359a.75.75 0 1 0 1.061 1.061l3.889-3.889a.75.75 0 0 0 0-1.061L6.89 3.58a.75.75 0 1 0-1.061 1.061l3.359 3.358z"></path></svg>
                    </div>
                    <div class="bui-button">发送</div>
                  </div>
                </div>
              </div>
              </div>
            </div>                    
            <div id="arc_tool_report" class="video-toolbar-container">
            <div class="video-toolbar-left">
              <div class="video-toolbar-left-main">
                <div class="toolbar-left-item-wrap" @click="handleVideoLikeClick">
                <div class=" video-toolbar-left-item">
                <svg v-if="!videoInfo.isLike" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="video-like-icon video-toolbar-item-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z" fill="#61666d"></path></svg>
                <svg v-else="videoInfo.isLike" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="video-like-icon video-toolbar-item-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z" fill="#00AEEC"></path></svg>
                <span class="video-toolbar-item-text" :class="{'video-like': videoInfo.isLike}">{{ videoInfo.likeCount }}</span>
                </div>
              </div>
              <div class="toolbar-left-item-wrap">
                <div class="video-toolbar-left-item">
                <svg width="36" height="36" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="video-coin-icon video-toolbar-item-icon" data-v-bb2825e0=""><path fill-rule="evenodd" clip-rule="evenodd" d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z" fill="#61666D"></path></svg>
                <span class="video-like-info video-toolbar-item-text">{{ videoInfo.coinCount }}</span>
                </div>
              </div>
              <div class="toolbar-left-item-wrap">
                <div class="video-toolbar-left-item">
                <svg width="36" height="36" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="video-fav-icon video-toolbar-item-icon" data-v-5f171eb7=""><path fill-rule="evenodd" clip-rule="evenodd" d="M19.8071 9.26152C18.7438 9.09915 17.7624 8.36846 17.3534 7.39421L15.4723 3.4972C14.8998 2.1982 13.1004 2.1982 12.4461 3.4972L10.6468 7.39421C10.1561 8.36846 9.25639 9.09915 8.19315 9.26152L3.94016 9.91102C2.63155 10.0734 2.05904 11.6972 3.04049 12.6714L6.23023 15.9189C6.96632 16.6496 7.29348 17.705 7.1299 18.7605L6.39381 23.307C6.14844 24.6872 7.62063 25.6614 8.84745 25.0119L12.4461 23.0634C13.4276 22.4951 14.6544 22.4951 15.6359 23.0634L19.2345 25.0119C20.4614 25.6614 21.8518 24.6872 21.6882 23.307L20.8703 18.7605C20.7051 17.705 21.0339 16.6496 21.77 15.9189L24.9597 12.6714C25.9412 11.6972 25.3687 10.0734 24.06 9.91102L19.8071 9.26152Z" fill="#61666d"></path></svg>
                <span class="video-like-info video-toolbar-item-text">{{ videoInfo.collectCount }}</span>
                </div>
              </div>
              <div class="toolbar-left-item-wrap">
                <div class="video-toolbar-left-item">
                <svg width="36" height="36" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="video-share-icon video-toolbar-item-icon"><path d="M12.6058 10.3326V5.44359C12.6058 4.64632 13.2718 4 14.0934 4C14.4423 4 14.78 4.11895 15.0476 4.33606L25.3847 12.7221C26.112 13.3121 26.2087 14.3626 25.6007 15.0684C25.5352 15.1443 25.463 15.2144 25.3847 15.2779L15.0476 23.6639C14.4173 24.1753 13.4791 24.094 12.9521 23.4823C12.7283 23.2226 12.6058 22.8949 12.6058 22.5564V18.053C7.59502 18.053 5.37116 19.9116 2.57197 23.5251C2.47607 23.6489 2.00031 23.7769 2.00031 23.2122C2.00031 16.2165 3.90102 10.3326 12.6058 10.3326Z" fill="#61666d"></path></svg>
                <span class="video-like-info video-toolbar-item-text">{{ videoInfo.shareCount }}</span>
                </div>
              </div>
              </div>
            </div> 
            <div class="video-toolbar-right">
              <div class="video-ai-assistant video-toolbar-right-item toolbar-right-ai minisize" style="margin-right: 0px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="video-ai-assistant-icon video-toolbar-item-icon"><g clip-path="url(#clip0_8665_4990)"><g filter="url(#filter0_f_8665_4990)"><path d="M19 8.0058C19 10.2183 16.0821 16.9998 11.94 16.9998C7.79788 16.9998 4 10.2183 4 8.0058C4 5.79333 7.35786 3.99977 11.5 3.99977C15.6421 3.99977 19 5.79333 19 8.0058Z" fill="white" fill-opacity="0.61"></path></g> <g opacity="0.6" filter="url(#filter1_f_8665_4990)"><path d="M21.5994 14.6024C21.5994 20.0163 17.3013 21.5998 11.9994 21.5998C6.69748 21.5998 2.39941 20.0163 2.39941 14.6024C2.39941 9.18859 3.13788 4.7998 11.9994 4.7998C21.2302 4.7998 21.5994 9.18859 21.5994 14.6024Z" fill="url(#paint0_linear_8665_4990)"></path></g> <g filter="url(#filter2_d_8665_4990)"><path d="M21.2301 15.234C21.2301 20.5883 17.0973 22.1544 11.9993 22.1544C6.90131 22.1544 2.76855 20.5883 2.76855 15.234C2.76855 9.87962 3.47861 5.53906 11.9993 5.53906C20.8751 5.53906 21.2301 9.87962 21.2301 15.234Z" fill="#D9D9D9"></path></g> <g filter="url(#filter3_d_8665_4990)"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.03142 1.87875C6.54055 1.45447 7.29723 1.52326 7.72151 2.03239L9.72151 4.43239C10.1458 4.94153 10.077 5.6982 9.56786 6.12248C9.05873 6.54676 8.30205 6.47797 7.87777 5.96884L5.87777 3.56884C5.4535 3.0597 5.52229 2.30303 6.03142 1.87875Z" fill="url(#paint1_linear_8665_4990)"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.03142 1.87875C6.54055 1.45447 7.29723 1.52326 7.72151 2.03239L9.72151 4.43239C10.1458 4.94153 10.077 5.6982 9.56786 6.12248C9.05873 6.54676 8.30205 6.47797 7.87777 5.96884L5.87777 3.56884C5.4535 3.0597 5.52229 2.30303 6.03142 1.87875Z" fill="#1E1E29"></path></g> <g filter="url(#filter4_d_8665_4990)"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5682 1.87875C17.0591 1.45447 16.3024 1.52326 15.8781 2.03239L13.8781 4.43239C13.4538 4.94153 13.5226 5.6982 14.0317 6.12248C14.5409 6.54676 15.2976 6.47797 15.7218 5.96884L17.7218 3.56884C18.1461 3.0597 18.0773 2.30303 17.5682 1.87875Z" fill="url(#paint2_linear_8665_4990)"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5682 1.87875C17.0591 1.45447 16.3024 1.52326 15.8781 2.03239L13.8781 4.43239C13.4538 4.94153 13.5226 5.6982 14.0317 6.12248C14.5409 6.54676 15.2976 6.47797 15.7218 5.96884L17.7218 3.56884C18.1461 3.0597 18.0773 2.30303 17.5682 1.87875Z" fill="#1E1E29"></path></g> <g filter="url(#filter5_ii_8665_4990)"><path d="M22.4045 15.1648C22.4045 21.3304 17.7483 22.4057 12.0045 22.4057C6.26073 22.4057 1.60449 21.3304 1.60449 15.1648C1.60449 8.00566 2.40449 4.80566 12.0045 4.80566C22.0045 4.80566 22.4045 8.00566 22.4045 15.1648Z" fill="url(#paint3_linear_8665_4990)"></path></g> <path d="M3.83203 11.3712C3.83203 9.54498 5.159 7.97354 6.97224 7.75614C10.5687 7.32495 13.4174 7.30903 17.0537 7.74864C18.8589 7.96688 20.1749 9.53494 20.1749 11.3533V15.3575C20.1749 17.0701 19.0072 18.5846 17.3193 18.8746C13.5256 19.5264 10.5395 19.4008 6.85061 18.8149C5.09301 18.5357 3.83203 16.9898 3.83203 15.2101V11.3712Z" fill="#191924"></path> <path d="M15.7178 12.2539L15.7178 14.4825" stroke="#2CFFFF" stroke-width="1.92" stroke-linecap="round"></path> <path d="M8.31152 12.2539L8.31152 14.4825" stroke="#2CFFFF" stroke-width="1.92" stroke-linecap="round"></path></g> <defs><filter id="filter0_f_8665_4990" x="-2.2" y="-2.2" width="27.4" height="25.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend> <feGaussianBlur stdDeviation="3.1" result="effect1_foregroundBlur_8665_4990"></feGaussianBlur></filter> <filter id="filter1_f_8665_4990" x="-1.60059" y="0.799805" width="27.2002" height="24.7998" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend> <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_8665_4990"></feGaussianBlur></filter> <filter id="filter2_d_8665_4990" x="-0.000676155" y="2.76983" width="24.0004" height="22.1537" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset></feOffset> <feGaussianBlur stdDeviation="1.38462"></feGaussianBlur> <feComposite in2="hardAlpha" operator="out"></feComposite> <feColorMatrix type="matrix" values="0 0 0 0 0.039545 0 0 0 0 0.0845023 0 0 0 0 0.200107 0 0 0 0.7 0"></feColorMatrix> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8665_4990"></feBlend> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8665_4990" result="shape"></feBlend></filter> <filter id="filter3_d_8665_4990" x="3.59961" y="-0.399414" width="8.40039" height="8.80029" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset></feOffset> <feGaussianBlur stdDeviation="1"></feGaussianBlur> <feComposite in2="hardAlpha" operator="out"></feComposite> <feColorMatrix type="matrix" values="0 0 0 0 0.855057 0 0 0 0 0.963764 0 0 0 0 1 0 0 0 0.8 0"></feColorMatrix> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8665_4990"></feBlend> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8665_4990" result="shape"></feBlend></filter> <filter id="filter4_d_8665_4990" x="11.5996" y="-0.399414" width="8.40039" height="8.80029" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset></feOffset> <feGaussianBlur stdDeviation="1"></feGaussianBlur> <feComposite in2="hardAlpha" operator="out"></feComposite> <feColorMatrix type="matrix" values="0 0 0 0 0.855057 0 0 0 0 0.963764 0 0 0 0 1 0 0 0 0.8 0"></feColorMatrix> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8665_4990"></feBlend> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8665_4990" result="shape"></feBlend></filter> <filter id="filter5_ii_8665_4990" x="0.00449228" y="3.31995" width="24.6284" height="21.3144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset dx="2.22857" dy="2.97143"></feOffset> <feGaussianBlur stdDeviation="1.11429"></feGaussianBlur> <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite> <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"></feColorMatrix> <feBlend mode="normal" in2="shape" result="effect1_innerShadow_8665_4990"></feBlend> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix> <feOffset dx="-1.6" dy="-1.48571"></feOffset> <feGaussianBlur stdDeviation="1.48571"></feGaussianBlur> <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.15445 0 0 0 0 0.454264 0 0 0 0.11 0"></feColorMatrix> <feBlend mode="normal" in2="effect1_innerShadow_8665_4990" result="effect2_innerShadow_8665_4990"></feBlend></filter> <linearGradient id="paint0_linear_8665_4990" x1="4.15362" y1="6.9227" x2="27.6921" y2="26.7689" gradientUnits="userSpaceOnUse"><stop stop-color="#9DE3FA"></stop> <stop offset="1" stop-color="#1C29A0"></stop></linearGradient> <linearGradient id="paint1_linear_8665_4990" x1="5.443" y1="2.28" x2="7.21478" y2="6.6384" gradientUnits="userSpaceOnUse"><stop stop-color="#393946"></stop> <stop offset="0.401159" stop-color="#23232E"></stop> <stop offset="1" stop-color="#191924"></stop></linearGradient> <linearGradient id="paint2_linear_8665_4990" x1="18.1566" y1="2.28" x2="16.3848" y2="6.6384" gradientUnits="userSpaceOnUse"><stop stop-color="#393946"></stop> <stop offset="0.401159" stop-color="#23232E"></stop> <stop offset="1" stop-color="#191924"></stop></linearGradient> <linearGradient id="paint3_linear_8665_4990" x1="6.14122" y1="8.65113" x2="15.9492" y2="23.2761" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FCFF"></stop> <stop offset="1" stop-color="#EAF5F9"></stop></linearGradient> <clipPath id="clip0_8665_4990"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg>

                  <div class="video-ai-assistant-bg">
                    <span class="video-ai-assistant-badge">测试版</span>
                  </div>
              </div>
              </div>
            </div>                    
            <div id="v_desc" class="video-desc-container">
              <div class="basic-desc-info">
                <span class="desc-info-text">{{ videoInfo.description }}</span>
              </div>  
            </div>
            <div class="video-tag-container">
              <div class="tag-panel">
                <div class="tag not-btn-tag">
                  <div class="topic-tag" >
                    <span class="tag-link topic-link">跟着UP主看世界</span>
                  </div>
                </div>
                <div class="tag not-btn-tag">
                  <div class="topic-tag" >
                    <span class="tag-link topic-link">非洲</span>
                  </div>
                </div>
                <div class="tag not-btn-tag">
                  <div class="topic-tag" >
                    <span class="tag-link topic-link">原创</span>
                  </div>
                </div>
                <div class="tag not-btn-tag">
                  <div class="topic-tag" >
                    <span class="tag-link topic-link">记录</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 评论 -->
            <div id="commentapp" class="comment-content-container">
            <!-- 发表 -->
            <div class="comment-header">
              <div id="header">
              <div id="navbar">
                <div id="title">
                <h2>评论</h2>
                <div class="comment-count">388</div>
                </div>
                <div id="sort-actions" class="hot">
                <!-- 最新/最热评论 -->
                 <div class="sort-action">
                  <span class="new" id="searchNewConment">最新</span>
                  <div class="sort-div"></div>
                  <span id="searchHotComment">最热</span>
                 </div>
                 </div>
              </div>
              <div id="comment-area" class="editbox" v-show="isLogin">
                <div id="user-avatar" class="editbox-left">
                  <el-avatar :size="45" :src="userInfo.avatar" />
                </div>
                <div id="body" class="editbox-middle">
                  <div id="editor" :class="{'active': showFooter}">
                    <input id="input"  
                    placeholder="请文明发言..."  
                    v-model="comment" 
                    @input="onInput"
                    />
                  </div>   
                  <div id="footer">
                    <div class="tool-btn emoji">
                      <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M6.14978 9.5497C5.911519999999999 9.618533333333332 5.77148 9.876833333333334 5.8369800000000005 10.126666666666665C6.010859999999999 10.792133333333332 6.458333333333333 11.221066666666667 6.9891000000000005 11.3022C7.358466666666666 11.371699999999999 7.7259 11.253699999999998 8 10.9912C8.2289 11.203199999999999 8.517266666666666 11.320733333333333 8.822433333333333 11.322099999999999C9.428333333333333 11.324366666666666 9.968266666666667 10.8752 10.163466666666666 10.126666666666665C10.228933333333334 9.876833333333334 10.088899999999999 9.6185 9.850633333333333 9.549733333333332C9.612366666666667 9.480899999999998 9.3661 9.627666666666666 9.300633333333334 9.8775C9.194333333333333 10.287166666666666 8.959666666666667 10.39 8.8136 10.385066666666667C8.6771 10.381133333333333 8.507366666666666 10.289066666666667 8.426033333333333 10.021666666666667C8.366433333333333 9.828 8.1944 9.696733333333333 8.0002 9.696766666666665C7.805999999999999 9.696766666666665 7.634 9.828 7.574399999999999 10.0217C7.479933333333333 10.332566666666665 7.2652 10.411999999999999 7.106766666666666 10.376533333333333C6.978133333333333 10.348466666666667 6.791413333333333 10.229966666666666 6.699806666666666 9.877466666666667C6.640386666666666 9.650866666666666 6.432313333333333 9.5091 6.2164399999999995 9.536166666666666L6.14978 9.5497z" fill="currentColor"></path><path d="M4.17582 6.281926666666667C4.34018 6.060033333333333 4.653313333333333 6.013393333333333 4.875206666666666 6.177766666666667L6.575206666666666 7.437033333333333C6.709806666666666 7.536733333333332 6.7855 7.697166666666666 6.776933333333333 7.8644333333333325C6.768366666666666 8.031699999999999 6.676566666666666 8.183566666666666 6.5325 8.268966666666666L4.8325 9.276333333333334C4.5949333333333335 9.417133333333332 4.288226666666667 9.3387 4.147446666666666 9.101099999999999C4.0066733333333335 8.863533333333333 4.085133333333333 8.556833333333334 4.3226933333333335 8.416066666666666L5.37502 7.792466666666667L4.27998 6.981299999999999C4.058086666666666 6.81696 4.011446666666666 6.503826666666666 4.17582 6.281926666666667z" fill="currentColor"></path><path d="M11.8223 6.281926666666667C11.657933333333332 6.060033333333333 11.3448 6.013393333333333 11.122899999999998 6.177766666666667L9.422899999999998 7.437033333333333C9.288333333333332 7.536733333333332 9.212599999999998 7.697166666666666 9.221166666666665 7.8644333333333325C9.229766666666666 8.031699999999999 9.321533333333333 8.183566666666666 9.465633333333333 8.268966666666666L11.165633333333332 9.276333333333334C11.403166666666666 9.417133333333332 11.7099 9.3387 11.850666666666665 9.101099999999999C11.991433333333333 8.863533333333333 11.912966666666666 8.556833333333334 11.675433333333332 8.416066666666666L10.623099999999999 7.792466666666667L11.718133333333334 6.981299999999999C11.940033333333332 6.81696 11.986666666666666 6.503826666666666 11.8223 6.281926666666667z" fill="currentColor"></path><path d="M8.000233333333332 2.333333333333333C4.870613333333333 2.333333333333333 2.33356 4.870386666666667 2.33356 8C2.33356 11.129633333333333 4.870613333333333 13.666666666666666 8.000233333333332 13.666666666666666C11.129833333333332 13.666666666666666 13.6669 11.129633333333333 13.6669 8C13.6669 4.870386666666667 11.129833333333332 2.333333333333333 8.000233333333332 2.333333333333333zM1.3335533333333331 8C1.3335533333333331 4.318099999999999 4.318326666666667 1.3333333333333333 8.000233333333332 1.3333333333333333C11.6821 1.3333333333333333 14.6669 4.318099999999999 14.6669 8C14.6669 11.681866666666666 11.6821 14.666666666666666 8.000233333333332 14.666666666666666C4.318326666666667 14.666666666666666 1.3335533333333331 11.681866666666666 1.3335533333333331 8z" fill="#61666d"></path></svg>
                    </div>
                    <div class="tool-btn emoji">
                      <svg id="icon" @click.stop="handleAtUser" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M7.571333333333333 5.642906666666666C6.5793133333333325 5.642906666666666 5.642753333333333 6.618966666666666 5.642753333333333 8.000066666666665C5.642753333333333 9.381133333333333 6.5793133333333325 10.357199999999999 7.571333333333333 10.357199999999999C8.563333333333333 10.357199999999999 9.499866666666666 9.381133333333333 9.499866666666666 8.000066666666665C9.499866666666666 6.618966666666666 8.563333333333333 5.642906666666666 7.571333333333333 5.642906666666666zM4.642753333333333 8.000066666666665C4.642753333333333 6.225226666666666 5.8808066666666665 4.642906666666667 7.571333333333333 4.642906666666667C9.261833333333332 4.642906666666667 10.499866666666666 6.225226666666666 10.499866666666666 8.000066666666665C10.499866666666666 9.774866666666666 9.261833333333332 11.357199999999999 7.571333333333333 11.357199999999999C5.8808066666666665 11.357199999999999 4.642753333333333 9.774866666666666 4.642753333333333 8.000066666666665z" fill="currentColor"></path><path d="M10.142933333333332 4.928546666666667C10.4191 4.928546666666667 10.642933333333332 5.152406666666666 10.642933333333332 5.428546666666667L10.642933333333332 9.2252C10.642933333333332 9.942633333333333 11.248999999999999 10.398666666666667 11.991566666666666 10.313733333333332C12.674966666666666 10.235533333333333 13.5227 9.639933333333332 13.621933333333333 8.034233333333333C13.639 7.7585999999999995 13.876199999999999 7.548966666666666 14.151833333333332 7.566033333333333C14.427433333333333 7.5830666666666655 14.637066666666666 7.8203 14.620033333333334 8.095933333333333C14.496433333333332 10.095066666666666 13.355166666666666 11.164233333333332 12.105233333333333 11.307233333333333C10.914533333333333 11.443466666666666 9.642933333333332 10.677233333333334 9.642933333333332 9.2252L9.642933333333332 5.428546666666667C9.642933333333332 5.152406666666666 9.866833333333332 4.928546666666667 10.142933333333332 4.928546666666667z" fill="currentColor"></path><path d="M8 2.375C4.8934 2.375 2.375 4.8934 2.375 8C2.375 11.1066 4.8934 13.625 8 13.625C9.132133333333332 13.625 10.184733333333334 13.291066666666666 11.066533333333332 12.716433333333331C11.2979 12.5657 11.607666666666667 12.631033333333331 11.758433333333333 12.862400000000001C11.909166666666666 13.093733333333333 11.843833333333333 13.403533333333332 11.612466666666666 13.5543C10.5732 14.231499999999999 9.3318 14.625 8 14.625C4.3411133333333325 14.625 1.375 11.6589 1.375 8C1.375 4.3411133333333325 4.3411133333333325 1.375 8 1.375C11.6589 1.375 14.625 4.3411133333333325 14.625 8C14.625 8.276133333333332 14.401133333333334 8.5 14.125 8.5C13.848866666666666 8.5 13.625 8.276133333333332 13.625 8C13.625 4.8934 11.1066 2.375 8 2.375z" fill="currentColor"></path></svg>
                    <!-- @用户弹窗 -->
                      <div class="at-user-list" v-show="isPopoverVisible">              
                      <div id="title">选择或输入你想@的人</div>
                      <el-scrollbar>
                      <div id="content">
                        <div class="group" v-show="myFollowList.length">
                          <div class="group-name">我的关注</div>
                          <div class="group-items">
                            <div class="item item-person" v-for="item in displayMyFollow" :key="item.userId" @click="handleChooseAtUser(item)">
                              <div class="item-avatar">
                                <el-avatar :src="item.avatar" :size="30"/> 
                              </div>
                              <div class="item-info">
                                <div class="item-name">{{ item.nickname }}</div>
                                <div class="item-desc">{{ item.followCount }}粉丝</div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="group" v-show="otherUser.length">
                          <div class="group-name">其他</div>
                          <div class="group-items">
                            <div class="item item-person" v-for="item in otherUser" :key="item.userId" @click="handleChooseAtUser(item)">
                              <div class="item-avatar">
                                <el-avatar :src="item.avatar" :size="30"/> 
                              </div>
                              <div class="item-info">
                                <div class="item-name">{{ item.nickname }}</div>
                                <div class="item-desc">{{ item.followCount }}粉丝</div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div>
                        </div>
                      </div>
                      </el-scrollbar>
                      </div>
                    </div>
                    <div class="tool-btn emoji">
                      <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M5.666666666666666 5.648313333333332C5.2883466666666665 5.648313333333332 4.9816666666666665 5.9549933333333325 4.9816666666666665 6.333313333333333C4.9816666666666665 6.71164 5.2883466666666665 7.0183 5.666666666666666 7.0183C6.04498 7.0183 6.351666666666667 6.71164 6.351666666666667 6.333313333333333C6.351666666666667 5.9549933333333325 6.04498 5.648313333333332 5.666666666666666 5.648313333333332zM4.018333333333333 6.333313333333333C4.018333333333333 5.42296 4.75632 4.684973333333333 5.666666666666666 4.684973333333333C6.577013333333333 4.684973333333333 7.3149999999999995 5.42296 7.3149999999999995 6.333313333333333C7.3149999999999995 7.2436333333333325 6.577013333333333 7.981633333333333 5.666666666666666 7.981633333333333C4.75632 7.981633333333333 4.018333333333333 7.2436333333333325 4.018333333333333 6.333313333333333z" fill="currentColor"></path><path d="M8 3.3317066666666664C6.321186666666667 3.3317066666666664 4.855333333333333 3.4171066666666663 3.820593333333333 3.5010199999999996C3.1014733333333333 3.5593333333333335 2.5440733333333334 4.108686666666666 2.48 4.821366666666666C2.4040466666666664 5.666206666666666 2.333333333333333 6.780333333333333 2.333333333333333 7.9984C2.333333333333333 9.216433333333333 2.4040466666666664 10.330533333333332 2.48 11.1754C2.5440733333333334 11.888066666666667 3.1014733333333333 12.437433333333333 3.820593333333333 12.495733333333334C4.855333333333333 12.579666666666665 6.321186666666667 12.665066666666664 8 12.665066666666664C9.678999999999998 12.665066666666664 11.144933333333334 12.5796 12.179733333333333 12.4957C12.898733333333332 12.437399999999998 13.456 11.8882 13.520066666666667 11.175699999999999C13.595999999999998 10.331233333333333 13.666666666666666 9.2173 13.666666666666666 7.9984C13.666666666666666 6.779433333333333 13.595999999999998 5.665519999999999 13.520066666666667 4.82104C13.456 4.10854 12.898733333333332 3.559353333333333 12.179733333333333 3.5010399999999997C11.144933333333334 3.4171266666666664 9.678999999999998 3.3317066666666664 8 3.3317066666666664zM3.7397666666666667 2.504293333333333C4.794879999999999 2.418733333333333 6.288386666666666 2.3317066666666664 8 2.3317066666666664C9.7118 2.3317066666666664 11.2054 2.4187466666666664 12.260533333333331 2.504313333333333C13.458733333333331 2.601493333333333 14.407866666666665 3.5282 14.516066666666667 4.731493333333333C14.593933333333332 5.597606666666666 14.666666666666666 6.742366666666666 14.666666666666666 7.9984C14.666666666666666 9.254366666666666 14.593933333333332 10.399133333333332 14.516066666666667 11.265266666666665C14.407866666666665 12.468533333333333 13.458733333333331 13.395266666666666 12.260533333333331 13.492433333333333C11.2054 13.578 9.7118 13.665066666666664 8 13.665066666666664C6.288386666666666 13.665066666666664 4.794879999999999 13.578 3.7397666666666667 13.492466666666667C2.541373333333333 13.395266666666666 1.5922066666666668 12.468333333333334 1.4840200000000001 11.264933333333333C1.4061199999999998 10.398466666666666 1.3333333333333333 9.253533333333333 1.3333333333333333 7.9984C1.3333333333333333 6.7432 1.4061199999999998 5.598253333333333 1.4840200000000001 4.731826666666667C1.5922066666666668 3.5284199999999997 2.541373333333333 2.6014733333333333 3.7397666666666667 2.504293333333333z" fill="currentColor"></path><path d="M10.574933333333332 9.035466666666666C10.3016 8.762066666666666 9.858366666666665 8.762066666666666 9.584966666666666 9.035433333333334L8.230066666666666 10.390366666666665C7.660799999999999 10.959633333333333 6.737666666666667 10.959433333333333 6.16866 10.3898C5.943406666666666 10.164333333333332 5.5779733333333334 10.164233333333332 5.35258 10.3896L4.353533333333333 11.3885C4.15826 11.583733333333331 3.841673333333333 11.583733333333331 3.6464266666666667 11.388466666666666C3.451173333333333 11.1932 3.451193333333333 10.8766 3.646466666666666 10.681333333333331L4.645526666666666 9.682433333333332C5.261586666666666 9.066433333333332 6.260426666666666 9.066733333333332 6.876133333333333 9.683066666666665C7.0547 9.861799999999999 7.344333333333333 9.861899999999999 7.522966666666666 9.683266666666666L8.877833333333333 8.328333333333333C9.541766666666666 7.6644000000000005 10.618233333333333 7.664433333333333 11.282133333333334 8.328433333333333L12.3536 9.400066666666666C12.548833333333334 9.595333333333333 12.5488 9.9119 12.353499999999999 10.107166666666666C12.158233333333332 10.302399999999999 11.841666666666665 10.302399999999999 11.6464 10.107099999999999L10.574933333333332 9.035466666666666z" fill="currentColor"></path></svg>
                    </div>
                  <div id="pub" class="editbox-right" >
                  <button :class="{'active': comment.length>0}" @click="handleMyComment">发布</button>
                  </div>
                </div> 
                </div>
              </div>

              <div class="notLogin-editbox" v-show="!isLogin">
                <div class="user-avatar">
                  <img width="48" height="48" src="/notLoginAvatar.png">
                </div>
                <div class="edit">
                  <div>请先</div>
                  <button>登录</button>
                  <div>后发表评论 (・ω・)</div>
                </div>
              </div>
            </div>
            </div>
            

          
          <!-- 顶级留言 -->
          <div class="listbox" v-for="(item, index) in commentsList" :key="index">
           <div class="top-level">
           <div class="listbox-top-user-avatar">
            <el-avatar :size="42" :src="item.avatar" /> 
           </div>
           <div class="listbox-comment-info">        
            <p class="comment-info-publisher">{{ item.publisherName}}</p>
            <div class="listbox-comment-context">{{ item.content }}</div>
            <div class="listbox-bottom">
              <div class="pubdate">{{ item.publishTime }}</div>
               <div class="like" @click="handleLikeClick(item)">
                <svg v-if="item.isLiked" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M13.545733333333333 5.166653333333333L10.511766666666666 5.166653333333333C10.658033333333332 4.851813333333333 10.821733333333334 4.440706666666666 10.880833333333332 4.044453333333333C10.923233333333332 3.760413333333333 10.927266666666664 3.412493333333333 10.893133333333333 3.0813333333333333C10.859833333333334 2.7581999999999995 10.784866666666666 2.3969066666666663 10.6352 2.1132133333333334C10.318299999999999 1.5124266666666666 9.882166666666667 1.09052 9.357366666666666 0.9881599999999999C8.799166666666666 0.8792866666666665 8.318566666666666 1.1633 8.030966666666666 1.59852C7.7904333333333335 1.9625133333333333 7.6966 2.26618 7.611066666666667 2.5431266666666668L7.608366666666666 2.5519066666666665C7.526133333333332 2.817973333333333 7.4452333333333325 3.07934 7.237266666666667 3.4476933333333335C6.895133333333334 4.053713333333333 6.615993333333333 4.36802 6.240833333333333 4.69694C6.046326666666666 4.867473333333333 5.84366 4.974753333333333 5.666666666666666 5.03686L5.666666666666666 14.149866666666664C6.190953333333333 14.161133333333334 6.752166666666666 14.168266666666668 7.333333333333333 14.168266666666668C8.896066666666666 14.168266666666668 10.214966666666665 14.117266666666666 11.084633333333333 14.071433333333333C11.938133333333333 14.026433333333333 12.754100000000001 13.5962 13.1998 12.814466666666664C13.621066666666666 12.075666666666665 14.160633333333333 10.9572 14.485833333333334 9.619766666666667C14.7904 8.367233333333333 14.9174 7.348799999999999 14.968999999999998 6.656493333333334C15.032466666666666 5.8043733333333325 14.340166666666665 5.166653333333333 13.545733333333333 5.166653333333333zM4.666666666666666 14.122666666666667L4.666666666666666 5.166653333333333L3.5348733333333335 5.166653333333333C2.506193333333333 5.166653333333333 1.591813333333333 5.90056 1.4747533333333334 6.9655C1.4003066666666666 7.642799999999999 1.3333333333333333 8.523499999999999 1.3333333333333333 9.5016C1.3333333333333333 10.559333333333333 1.4116666666666666 11.540700000000001 1.4928399999999997 12.274533333333332C1.6048399999999998 13.287066666666664 2.43944 14.026599999999998 3.4350066666666668 14.073566666666666C3.78952 14.0903 4.205413333333333 14.107633333333332 4.666666666666666 14.122666666666667z" fill="#00AEEC"></path></svg>
                <svg v-else t="1753757868857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4524" width="16" height="16"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="4525" fill="#9499A0"></path></svg>
                <p>{{ item.likeCount }}</p>
              </div>
               <div class="dislike">
                <svg t="1753758155261" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5799" width="16" height="16"><path d="M128.192 223.68A103.04 103.04 0 0 1 231.552 128h510.72l6.976 0.128A103.04 103.04 0 0 1 845.44 215.04l49.344 316.8 0.96 8.128c1.92 27.136-7.04 54.08-25.344 74.688l-5.632 5.888-6.08 5.44a104.256 104.256 0 0 1-67.392 23.68H621.184v108.8l-0.192 7.808C616.896 838.72 556.096 896 481.92 896l-4.672-0.32a32 32 0 0 1-24.512-18.496L318.144 579.2H231.552l-6.784-0.192A102.912 102.912 0 0 1 128 476.8V230.4l0.192-6.72z m373.12 605.824l4.352-1.28 5.888-2.176a73.6 73.6 0 0 0 45.568-67.648v-140.8l0.32-4.288a32 32 0 0 1 31.68-27.712h202.496l5.12-0.192c10.048-1.152 19.2-5.76 25.664-13.184a37.632 37.632 0 0 0 9.088-30.72l-49.344-316.736-1.024-4.608-1.536-4.352A39.552 39.552 0 0 0 742.592 192h-371.84v348.288l130.56 289.28z m-194.496-637.44H231.552l-4.672 0.192A38.848 38.848 0 0 0 192 230.4v246.4l0.256 4.48c2.304 19.008 18.88 33.92 39.296 33.92h75.264V192z" fill="#9499A0" p-id="5800"></path></svg>
                <p>{{ item.dislikeCount }}</p>
              </div>
               <span class="reply" @click="handleReply(item.commentId, item.commentId)">回复</span>
            </div>
          </div>
           </div>
        
          <!--二级留言  -->
           <div v-if="item.childComments && item.childComments.length" :key="item.childComments.commentId">
           <SecondComment
            :secondComments="item.childComments"
            :rootCommentId="item.commentId"
            @handle-reply="handleReply"
            style="margin-left: 0"
          />

          <!-- 三级留言 -->
           <template
            v-for="(child, childIndex) in item.childComments"
            :key="childIndex"
          >
            <template v-if="child.childComments && child.childComments.length">
              <ChildComment
                :childComments="child.childComments"
                :rootCommentId="item.commentId"
                :parentName="child.publisherName"
                @to-reply="handleReply"
                style="margin-left: 65px"
              />
            </template>
          </template>
           </div>
           <!-- 回复框 -->
        <div id="comment-area" class="editbox" v-show="showReplyIndex === item.commentId && showReply" >
            <div id="user-avatar" class="editbox-left">
              <el-avatar :size="30" :src="userInfo.avatar" />
            </div>
            <div id="body" class="editbox-middle">
              <div id="editor" :class="{'active': showFooter}">
                <input id="input"  
                  placeholder="请文明发言..."  
                  v-model="replyComment" 
                />
              </div>   
              <div id="footer">
                <div class="tool-btn emoji">
                  <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M6.14978 9.5497C5.911519999999999 9.618533333333332 5.77148 9.876833333333334 5.8369800000000005 10.126666666666665C6.010859999999999 10.792133333333332 6.458333333333333 11.221066666666667 6.9891000000000005 11.3022C7.358466666666666 11.371699999999999 7.7259 11.253699999999998 8 10.9912C8.2289 11.203199999999999 8.517266666666666 11.320733333333333 8.822433333333333 11.322099999999999C9.428333333333333 11.324366666666666 9.968266666666667 10.8752 10.163466666666666 10.126666666666665C10.228933333333334 9.876833333333334 10.088899999999999 9.6185 9.850633333333333 9.549733333333332C9.612366666666667 9.480899999999998 9.3661 9.627666666666666 9.300633333333334 9.8775C9.194333333333333 10.287166666666666 8.959666666666667 10.39 8.8136 10.385066666666667C8.6771 10.381133333333333 8.507366666666666 10.289066666666667 8.426033333333333 10.021666666666667C8.366433333333333 9.828 8.1944 9.696733333333333 8.0002 9.696766666666665C7.805999999999999 9.696766666666665 7.634 9.828 7.574399999999999 10.0217C7.479933333333333 10.332566666666665 7.2652 10.411999999999999 7.106766666666666 10.376533333333333C6.978133333333333 10.348466666666667 6.791413333333333 10.229966666666666 6.699806666666666 9.877466666666667C6.640386666666666 9.650866666666666 6.432313333333333 9.5091 6.2164399999999995 9.536166666666666L6.14978 9.5497z" fill="currentColor"></path><path d="M4.17582 6.281926666666667C4.34018 6.060033333333333 4.653313333333333 6.013393333333333 4.875206666666666 6.177766666666667L6.575206666666666 7.437033333333333C6.709806666666666 7.536733333333332 6.7855 7.697166666666666 6.776933333333333 7.8644333333333325C6.768366666666666 8.031699999999999 6.676566666666666 8.183566666666666 6.5325 8.268966666666666L4.8325 9.276333333333334C4.5949333333333335 9.417133333333332 4.288226666666667 9.3387 4.147446666666666 9.101099999999999C4.0066733333333335 8.863533333333333 4.085133333333333 8.556833333333334 4.3226933333333335 8.416066666666666L5.37502 7.792466666666667L4.27998 6.981299999999999C4.058086666666666 6.81696 4.011446666666666 6.503826666666666 4.17582 6.281926666666667z" fill="currentColor"></path><path d="M11.8223 6.281926666666667C11.657933333333332 6.060033333333333 11.3448 6.013393333333333 11.122899999999998 6.177766666666667L9.422899999999998 7.437033333333333C9.288333333333332 7.536733333333332 9.212599999999998 7.697166666666666 9.221166666666665 7.8644333333333325C9.229766666666666 8.031699999999999 9.321533333333333 8.183566666666666 9.465633333333333 8.268966666666666L11.165633333333332 9.276333333333334C11.403166666666666 9.417133333333332 11.7099 9.3387 11.850666666666665 9.101099999999999C11.991433333333333 8.863533333333333 11.912966666666666 8.556833333333334 11.675433333333332 8.416066666666666L10.623099999999999 7.792466666666667L11.718133333333334 6.981299999999999C11.940033333333332 6.81696 11.986666666666666 6.503826666666666 11.8223 6.281926666666667z" fill="currentColor"></path><path d="M8.000233333333332 2.333333333333333C4.870613333333333 2.333333333333333 2.33356 4.870386666666667 2.33356 8C2.33356 11.129633333333333 4.870613333333333 13.666666666666666 8.000233333333332 13.666666666666666C11.129833333333332 13.666666666666666 13.6669 11.129633333333333 13.6669 8C13.6669 4.870386666666667 11.129833333333332 2.333333333333333 8.000233333333332 2.333333333333333zM1.3335533333333331 8C1.3335533333333331 4.318099999999999 4.318326666666667 1.3333333333333333 8.000233333333332 1.3333333333333333C11.6821 1.3333333333333333 14.6669 4.318099999999999 14.6669 8C14.6669 11.681866666666666 11.6821 14.666666666666666 8.000233333333332 14.666666666666666C4.318326666666667 14.666666666666666 1.3335533333333331 11.681866666666666 1.3335533333333331 8z" fill="#61666d"></path></svg>
                </div>
                <div class="tool-btn emoji">
                  <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M7.571333333333333 5.642906666666666C6.5793133333333325 5.642906666666666 5.642753333333333 6.618966666666666 5.642753333333333 8.000066666666665C5.642753333333333 9.381133333333333 6.5793133333333325 10.357199999999999 7.571333333333333 10.357199999999999C8.563333333333333 10.357199999999999 9.499866666666666 9.381133333333333 9.499866666666666 8.000066666666665C9.499866666666666 6.618966666666666 8.563333333333333 5.642906666666666 7.571333333333333 5.642906666666666zM4.642753333333333 8.000066666666665C4.642753333333333 6.225226666666666 5.8808066666666665 4.642906666666667 7.571333333333333 4.642906666666667C9.261833333333332 4.642906666666667 10.499866666666666 6.225226666666666 10.499866666666666 8.000066666666665C10.499866666666666 9.774866666666666 9.261833333333332 11.357199999999999 7.571333333333333 11.357199999999999C5.8808066666666665 11.357199999999999 4.642753333333333 9.774866666666666 4.642753333333333 8.000066666666665z" fill="currentColor"></path><path d="M10.142933333333332 4.928546666666667C10.4191 4.928546666666667 10.642933333333332 5.152406666666666 10.642933333333332 5.428546666666667L10.642933333333332 9.2252C10.642933333333332 9.942633333333333 11.248999999999999 10.398666666666667 11.991566666666666 10.313733333333332C12.674966666666666 10.235533333333333 13.5227 9.639933333333332 13.621933333333333 8.034233333333333C13.639 7.7585999999999995 13.876199999999999 7.548966666666666 14.151833333333332 7.566033333333333C14.427433333333333 7.5830666666666655 14.637066666666666 7.8203 14.620033333333334 8.095933333333333C14.496433333333332 10.095066666666666 13.355166666666666 11.164233333333332 12.105233333333333 11.307233333333333C10.914533333333333 11.443466666666666 9.642933333333332 10.677233333333334 9.642933333333332 9.2252L9.642933333333332 5.428546666666667C9.642933333333332 5.152406666666666 9.866833333333332 4.928546666666667 10.142933333333332 4.928546666666667z" fill="currentColor"></path><path d="M8 2.375C4.8934 2.375 2.375 4.8934 2.375 8C2.375 11.1066 4.8934 13.625 8 13.625C9.132133333333332 13.625 10.184733333333334 13.291066666666666 11.066533333333332 12.716433333333331C11.2979 12.5657 11.607666666666667 12.631033333333331 11.758433333333333 12.862400000000001C11.909166666666666 13.093733333333333 11.843833333333333 13.403533333333332 11.612466666666666 13.5543C10.5732 14.231499999999999 9.3318 14.625 8 14.625C4.3411133333333325 14.625 1.375 11.6589 1.375 8C1.375 4.3411133333333325 4.3411133333333325 1.375 8 1.375C11.6589 1.375 14.625 4.3411133333333325 14.625 8C14.625 8.276133333333332 14.401133333333334 8.5 14.125 8.5C13.848866666666666 8.5 13.625 8.276133333333332 13.625 8C13.625 4.8934 11.1066 2.375 8 2.375z" fill="currentColor"></path></svg>
                </div>
                <div class="tool-btn emoji">
                  <svg id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M5.666666666666666 5.648313333333332C5.2883466666666665 5.648313333333332 4.9816666666666665 5.9549933333333325 4.9816666666666665 6.333313333333333C4.9816666666666665 6.71164 5.2883466666666665 7.0183 5.666666666666666 7.0183C6.04498 7.0183 6.351666666666667 6.71164 6.351666666666667 6.333313333333333C6.351666666666667 5.9549933333333325 6.04498 5.648313333333332 5.666666666666666 5.648313333333332zM4.018333333333333 6.333313333333333C4.018333333333333 5.42296 4.75632 4.684973333333333 5.666666666666666 4.684973333333333C6.577013333333333 4.684973333333333 7.3149999999999995 5.42296 7.3149999999999995 6.333313333333333C7.3149999999999995 7.2436333333333325 6.577013333333333 7.981633333333333 5.666666666666666 7.981633333333333C4.75632 7.981633333333333 4.018333333333333 7.2436333333333325 4.018333333333333 6.333313333333333z" fill="currentColor"></path><path d="M8 3.3317066666666664C6.321186666666667 3.3317066666666664 4.855333333333333 3.4171066666666663 3.820593333333333 3.5010199999999996C3.1014733333333333 3.5593333333333335 2.5440733333333334 4.108686666666666 2.48 4.821366666666666C2.4040466666666664 5.666206666666666 2.333333333333333 6.780333333333333 2.333333333333333 7.9984C2.333333333333333 9.216433333333333 2.4040466666666664 10.330533333333332 2.48 11.1754C2.5440733333333334 11.888066666666667 3.1014733333333333 12.437433333333333 3.820593333333333 12.495733333333334C4.855333333333333 12.579666666666665 6.321186666666667 12.665066666666664 8 12.665066666666664C9.678999999999998 12.665066666666664 11.144933333333334 12.5796 12.179733333333333 12.4957C12.898733333333332 12.437399999999998 13.456 11.8882 13.520066666666667 11.175699999999999C13.595999999999998 10.331233333333333 13.666666666666666 9.2173 13.666666666666666 7.9984C13.666666666666666 6.779433333333333 13.595999999999998 5.665519999999999 13.520066666666667 4.82104C13.456 4.10854 12.898733333333332 3.559353333333333 12.179733333333333 3.5010399999999997C11.144933333333334 3.4171266666666664 9.678999999999998 3.3317066666666664 8 3.3317066666666664zM3.7397666666666667 2.504293333333333C4.794879999999999 2.418733333333333 6.288386666666666 2.3317066666666664 8 2.3317066666666664C9.7118 2.3317066666666664 11.2054 2.4187466666666664 12.260533333333331 2.504313333333333C13.458733333333331 2.601493333333333 14.407866666666665 3.5282 14.516066666666667 4.731493333333333C14.593933333333332 5.597606666666666 14.666666666666666 6.742366666666666 14.666666666666666 7.9984C14.666666666666666 9.254366666666666 14.593933333333332 10.399133333333332 14.516066666666667 11.265266666666665C14.407866666666665 12.468533333333333 13.458733333333331 13.395266666666666 12.260533333333331 13.492433333333333C11.2054 13.578 9.7118 13.665066666666664 8 13.665066666666664C6.288386666666666 13.665066666666664 4.794879999999999 13.578 3.7397666666666667 13.492466666666667C2.541373333333333 13.395266666666666 1.5922066666666668 12.468333333333334 1.4840200000000001 11.264933333333333C1.4061199999999998 10.398466666666666 1.3333333333333333 9.253533333333333 1.3333333333333333 7.9984C1.3333333333333333 6.7432 1.4061199999999998 5.598253333333333 1.4840200000000001 4.731826666666667C1.5922066666666668 3.5284199999999997 2.541373333333333 2.6014733333333333 3.7397666666666667 2.504293333333333z" fill="currentColor"></path><path d="M10.574933333333332 9.035466666666666C10.3016 8.762066666666666 9.858366666666665 8.762066666666666 9.584966666666666 9.035433333333334L8.230066666666666 10.390366666666665C7.660799999999999 10.959633333333333 6.737666666666667 10.959433333333333 6.16866 10.3898C5.943406666666666 10.164333333333332 5.5779733333333334 10.164233333333332 5.35258 10.3896L4.353533333333333 11.3885C4.15826 11.583733333333331 3.841673333333333 11.583733333333331 3.6464266666666667 11.388466666666666C3.451173333333333 11.1932 3.451193333333333 10.8766 3.646466666666666 10.681333333333331L4.645526666666666 9.682433333333332C5.261586666666666 9.066433333333332 6.260426666666666 9.066733333333332 6.876133333333333 9.683066666666665C7.0547 9.861799999999999 7.344333333333333 9.861899999999999 7.522966666666666 9.683266666666666L8.877833333333333 8.328333333333333C9.541766666666666 7.6644000000000005 10.618233333333333 7.664433333333333 11.282133333333334 8.328433333333333L12.3536 9.400066666666666C12.548833333333334 9.595333333333333 12.5488 9.9119 12.353499999999999 10.107166666666666C12.158233333333332 10.302399999999999 11.841666666666665 10.302399999999999 11.6464 10.107099999999999L10.574933333333332 9.035466666666666z" fill="currentColor"></path></svg>
                </div>
                <div id="pub" class="editbox-right" >
                  <button :class="{'active': replyComment.length>0}" @click="handlePublish(replyComment)">发布</button>
                </div>
              </div> 
            </div>
          </div>
         </div>
        </div>
        </div>
        <div class="right-container">
        <div class="right-container-inner scroll-sticky">
            <!-- up主信息 -->
            <div class="up-info-container">
              <div class="up-info-left">
                <div class="up-avatar-wrap">
                  <img :src="upLoaderInfo.avatar">
                </div>
              </div>  
              <div class="up-info-right">
                <div class="up-detail-top">
                  <div class="up-name">{{ upLoaderInfo.nickname }}</div>
                  <div class="up-description up-detail-bottom">{{upLoaderInfo.signature }}</div>
                </div>
              <div class="fans-area">  
                <div class="money-btn">
                  <div class="charge-btn-icon">
                    <img data-v-3ff36384="" src="/moneyIcon.png" alt="">
                  </div>
                  <span>充电</span>
                </div>             
                <div class="follow-btn" @click="handleFollowUp" v-if="!upLoaderInfo.isFollowed">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="follow-btn-icon" data-v-3ff36384=""><path fill-rule="evenodd" clip-rule="evenodd" d="M7.25098 8.75V13.25C7.25098 13.6642 7.58676 14 8.00098 14C8.41519 14 8.75098 13.6642 8.75098 13.25V8.75H13.251C13.6652 8.75 14.001 8.41421 14.001 8C14.001 7.58579 13.6652 7.25 13.251 7.25H8.75098V2.75C8.75098 2.33579 8.41519 2 8.00098 2C7.58676 2 7.25098 2.33579 7.25098 2.75V7.25H2.75098C2.33676 7.25 2.00098 7.58579 2.00098 8C2.00098 8.41421 2.33676 8.75 2.75098 8.75H7.25098Z" fill="currentColor"></path></svg>
                  <span>关注 1.5万</span>  
                </div>
                <el-popover 
                 placement="bottom" 
                 trigger="hover" 
                 width="10px"  
                :show-arrow="false"  
                :popper-style="{
                 borderRadius: '10px',
                 padding: '0'
                }">
                <template #reference>
                  <div class="has-follow-btn" v-show="upLoaderInfo.isFollowed">
                  <svg data-v-3ff36384="" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="follow-btn-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 3.72386 2.22386 3.5 2.5 3.5H13.5C13.7761 3.5 14 3.72386 14 4C14 4.27614 13.7761 4.5 13.5 4.5H2.5C2.22386 4.5 2 4.27614 2 4ZM2 8C2 7.72386 2.22386 7.5 2.5 7.5H13.5C13.7761 7.5 14 7.72386 14 8C14 8.27614 13.7761 8.5 13.5 8.5H2.5C2.22386 8.5 2 8.27614 2 8ZM2.5 11.5C2.22386 11.5 2 11.7239 2 12C2 12.2761 2.22386 12.5 2.5 12.5H13.5C13.7761 12.5 14 12.2761 14 12C14 11.7239 13.7761 11.5 13.5 11.5H2.5Z" fill="currentColor"></path></svg>
                  <span>关注 1.5万</span>  
                </div>
                </template>
                  <div class="follow_dropdown">
                    <span>设置分组</span>
                    <span @click="cancelFollowUp">取消关注</span>
                  </div>
               </el-popover>
              </div>
              </div>
            </div>
             <div class="rec-title">
                <div class="title-txt">接下来播放</div>
                <div class="continuous-btn">
                    <span>自动连播</span>
                    <el-switch />
                </div>
             </div>   
             <div v-for="item in recommendList" :key="item.videoId" class="recom-video-card" @click="handlePlayVideo(item.videoId)">
              <RecVideoCard :video="item" />
             </div>
        </div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="js" setup>
import ScrollHeader from '@/components/ScrollHeader.vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { getVideoDetail} from '@/api/video';
import { getNewComments,getHotComments,uploadComments } from '@/api/comment';
import { getUpInfo,followUp,unFollowUp,cancelLikeComments,likeVideo,cancelLikeVideo,likeComment } from '@/api/user';
import {onMounted, reactive, ref,watch} from 'vue';
import SecondComment from '@/components/SecondComment.vue';
import ChildComment from '@/components/ChildComment.vue';
import { ElMessage } from 'element-plus';
import { getRecommendVideos } from '@/api/video';
import RecVideoCard from '@/components/RecVideoCard.vue';
import { useUserStore } from '@/store/useUserStore';
import { storeToRefs } from 'pinia';
import { searchUser ,searchMyFollow,randomUser} from '@/api/user';

const userStore = useUserStore();
const { userInfo ,isLogin} = storeToRefs(userStore);
const route = useRoute()
const router = useRouter()
const myFollowList=ref([])//我的关注用户
const displayMyFollow= ref([]);
const otherUser=ref([])//其他用户
const showFooter=ref(false)//是否点击输入框
const videoId=ref('')//视频id(路由传入)
const commentsList = ref([])//评论列表
const comment=ref('')//评论输入框的内容
const replyComment=ref('')
const showReplyIndex = ref(-1);// 当前点击回复框的索引
const showReply = ref(false);// 控制回复框的显示隐藏
const parentId=ref('')//回复上级id
const recommendList=reactive([]) //推荐视频列表
const videoInfo=ref({})//视频详情
const isPopoverVisible=ref(false)//是否显示关注弹窗
const upLoaderInfo=ref({})//up主信息
  


function handlePlayVideo(videoId){
  console.log(videoId)
  router.push({
    name: 'videoDetail',
    params: { id: videoId}
  })
  console.log('播放视频')
}


//获取推荐视频列表
const getRecommendVideoList=async()=>{
  try{
    const res=await getRecommendVideos(videoId.value)
    console.log(res)
    recommendList.push(...res)
  }catch(e){
    console.log('推荐视频获取失败',e)
  }
}

//根据路由获取视频详细信息
const getVideoDetailInfo=async ()=>{
  try{
    const params1={
      videoId:videoId.value,
      userId:userInfo.value.userId
    }
    const res=await getVideoDetail(params1)//获取视频详情
    videoInfo.value=res
    const params2={
      userId:videoInfo.value.uploaderId,
      loginUserId:userInfo.value.userId
    }
    const upInfo=await getUpInfo(params2)//获取up主信息
    upLoaderInfo.value=upInfo
    console.log(upLoaderInfo.value)
    console.log(upInfo)
  }catch(e){
    console.log('视频详情获取失败',e)
  }
}

//获取视频评论
const getVideoComment=async()=>{
  try{
    const params={
      videoId:videoId.value,
      userId:userInfo?.value.userId
    }
    const res=await getHotComments(params)
    commentsList.value=res
    console.log(commentsList.value)
  }catch(e){
    console.log('视频评论获取失败',e)
  }
}


//定位评论回复框
const handleReply=(rootCommentId,parentCommentId)=>{
  if(!isLogin.value) {
    return ElMessage.error('请先登录评论哦！');
  }
  //显示回复框
  showReplyIndex.value = rootCommentId
  //控制显示隐藏
  showReply.value=!showReply.value;
  showReplyIndex.value!=-1? parentId.value=parentCommentId: parentId.value=''
}

//关注up主
const handleFollowUp=async()=>{
  if(!isLogin.value) {
    return ElMessage.error('请先登录再关注哦！');
  }
  try{
    if(!isLogin.value) {
      return ElMessage.error('您还未登录,请先登录');
    }
    if(upLoaderInfo.value.isFollowed)return;
    const data={
      userId:userInfo.value.userId,
      followedUserId:upLoaderInfo.value.userId
    }
    await followUp(data)
    ElMessage.success('关注成功')
    upLoaderInfo.value.isFollowed = true;
  }catch(e){
    console.log('关注失败',e)
  }
}

//取消关注
const cancelFollowUp=async()=>{
  if(!upLoaderInfo.value.isFollowed)return;
  try{
    const data={
      userId:userInfo.value.userId,
      followedUserId:upLoaderInfo.value.userId
    }
    await unFollowUp(data)
    ElMessage.success('取关成功')
    upLoaderInfo.value.isFollowed = false;
  }catch(e){
    console.log('取关失败',e)
  }
}

//点赞/取消点赞某个视频
const handleVideoLikeClick=async()=>{
  if(!isLogin.value) {
    return ElMessage.error('请先登录再点赞哦！');
  }
  if(videoInfo.value===null) return
  const data={
      videoId:videoId.value,
      userId:userInfo.value.userId
    }
  try{
    if(videoInfo.value.isLike){
    videoInfo.value.isLike=false
    videoInfo.value.likeCount-=1
    await cancelLikeVideo(data)
  }else{
    videoInfo.value.isLike=true
    videoInfo.value.likeCount+=1
    await likeVideo(data)
  }
  }catch(e){
    console.log('点赞失败',e)
  }
}

// @弹窗中的功能-------------------------------------
//初始化推荐@用户
async function loadInitialData() {
  if (userInfo.value === null) return;
  try {
    const res = await searchMyFollow(userInfo.value?.userId);
    myFollowList.value = res;
    displayMyFollow.value=myFollowList.value.slice(0,5)
    const res2 = await randomUser(userInfo.value?.userId);
    otherUser.value = res2;
  } catch (e) {
    console.log('加载初始数据失败', e);
  }
}

//根据昵称模糊查询我关注的用户(@弹窗中输入框输入时调用)
function  searchMyFollowUser(keyword){
    const kw = keyword.trim().toLowerCase();
    if (!kw) return myFollowList.value;
    displayMyFollow.value=myFollowList.value.filter(item =>
        item.nickname.toLowerCase().includes(kw)
    )
}

//根据昵称模糊查询其他用户(@弹窗中输入框输入时调用)
async function searchUserByNickname(keyword){
  if(keyword===null||keyword==='') return
  try{
    const res=await searchUser(keyword)
    otherUser.value=res
  }catch(e){
    console.log(e)
  }
}

//输入框变化时
function onInput(){
  // const match = comment.value.match(/@([^@\s]*)$/)
  const match = comment.value.match(/@([^@]*)$/);
  console.log(match)
  if(match) 
  {
  console.log(match)
  isPopoverVisible.value=true
  const keyword = match[1];
  if(keyword===null||keyword==='') {
    loadInitialData()
    return;
  }
  searchMyFollowUser(keyword);
  searchUserByNickname(keyword);
  }else{
    isPopoverVisible.value=false
  }
}

//点击@符号
function handleAtUser(){
  isPopoverVisible.value=true;
  comment.value += '@';
  //显示弹窗，搜锁用户
  if(isPopoverVisible.value){
    loadInitialData()
  }
}

//选择@的用户
function handleChooseAtUser(user){
  comment.value = comment.value+user.nickname+' '
  isPopoverVisible.value=false
}

// 解析评论内容，提取出所有 @ 的用户昵称,根据昵称去找被@用户的id
function extractMentions() {
  const mentionRegex = /@(\S+)/g; // 匹配 @ 后面的非空白字符
  const mentions = [];
  const ids=[];
  let match;
  // 提取所有 @ 的用户昵称
  while ((match = mentionRegex.exec(comment.value)) !== null) {
    mentions.push(match[1]);
  }
  // 合并两个用户列表
  const allUsers = [...(myFollowList.value || []), ...(otherUser.value || [])];
  const nicknameToIdMap = new Map(allUsers.map(user => [user.nickname, user.userId]));
  // 根据昵称获取用户 ID
  mentions.forEach(nickname => {
    const id = nicknameToIdMap.get(nickname);
    if (id) {
      ids.push(id);
    }
  });
  return ids;
}


//发表评论
const handleMyComment=async ()=>{
  //查看是否有@的用户
  const mentionUserId=extractMentions()
  const params={
    videoId:videoId.value,
    content:comment.value,
    publisherId:userInfo.value.userId,
    accepterId:upLoaderInfo.value.userId,
    parentCommentId: -1,
    hasAtUser:mentionUserId.length>0?true:false,
    atUserIds:mentionUserId
  }
  try{
    const res=await uploadComments(params)
    ElMessage.success('发表成功!')
    getVideoComment();
    comment.value=''
  }catch(e){
    console.log('发表评论失败',e)
  }

}

//发布回复评论
const handlePublish=async(content)=>{
  //封装请求体
  const params={
    videoId:videoId.value,
    content:content,
    publisherId:userInfo.value.userId,
    parentCommentId:parentId.value,
    hasAtUser:false
  }
  try{
    await uploadComments(params)
    ElMessage.success('发表成功!')
    getVideoComment();
    comment=''
  }catch(e){
    console.log('发表评论失败',e)
  }finally{
     //隐藏回复框
    comment.value='';
    showReply.value=false;
    showReplyIndex .value=-1;
  }
}  

//评论点赞/取消点赞
const handleLikeClick= async(item)=>{
  if(!isLogin.value) {
    return ElMessage.error('请先登录再点赞哦！');
  }
  const data={
    userId:userInfo.value.userId,
    commentId:item.commentId
  }
  try{
  if(!item.isLiked){
    item.likeCount+=1
    await likeComment(data)
    item.isLiked=true
  }
 else{
    item.likeCount-=1
    await cancelLikeComments(data)
    item.isLiked=false
  }
 }catch(e){
    console.log('评论点赞失败',e)
  }
}
//监听路由变化
watch(() => route.params.id, (newId) => {
  if (newId) {
    videoId.value = newId
    getVideoDetailInfo()
    getVideoComment()
    getRecommendVideoList()
  }
}, { immediate: true })


</script>
<style lang="css" scoped>
.video-detail-container {
  height: 100vh;
  overflow-y: auto;
}

.bili-header {
    min-height: 64px;
    position: sticky;
    margin: 0 auto;
    top: 0;
    z-index:300;
    max-width: 2560px;
    width: 100%;
    box-shadow: 0 2px 4px #00000014;
}
.video-container-v1{
    display: flex;
    justify-content: center;
    box-sizing: content-box;
    position: relative;
    width: auto;
    padding: 0 10px;
}
@media (min-width: 1681px) {
    .up-info-container{
        height: 108px;
    }
}
.up-info-container{
    box-sizing: border-box;
    height: 104px;
    width: 300px;
    display: flex;
    align-items: center;
    /* border: 1px solid red; */
}
/* .video-container-v1 .left-container.scroll-sticky {
    position: sticky;
    height: fit-content;
    z-index: 1;
} */
.video-container-v1 .left-container{
    position: relative;
}
.left-container {
    width: 713px;
}
.video-info-container {
    --keep-blank-space: 30px;
    position: relative;
    height: 104px;
    box-sizing: border-box;
    padding-top: 22px;
}

.video-info-container .video-info-title-inner-overflow .video-title {
    margin-right: 30px;
    flex-shrink: initial;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.video-info-container .video-info-title-inner .video-title {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 500;
    color: #18191C;
    line-height: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.left-container{
  width: 58vw;
  /* height: 100vh; */
  min-width:668px;
  /* border: 1px solid #ebeef5; */
  height: 100%;
}
@media (min-width: 1681px) {
    .video-container-v1 .right-container {
        width: 411px;
    }
}
.video-container-v1 .right-container{
    width: 350px;
    flex: none;
    margin-left: 30px;
    position: relative;
 
    /* border: 1px solid red; */
}
.video-container-v1 .right-container .right-container-inner.scroll-sticky {
    position: sticky;
}

.video-container-v1 .right-container .right-container-inner {
    padding-bottom: 250px;
}
.right-container-inner{
  /* position: sticky; */
  margin-left: 0px;
  display: flex;
  flex-direction: column;
  gap:8px;
  padding: 10px 0; 
  min-width: 400px;
  width: 26vw;
  position: relative;
  height: 100%;
}
.right-container-inner span{
  color: #61666D;
  font-size: 13px;
  cursor: pointer;
}
.video-info-title{
  position: relative;
}
.video-info-container .video-info-title-inner{
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.video-title{
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}
.video-info-container .video-info-meta{
  margin-top: 6px;
  position: relative;
  display: flex;
  align-items: center;
}

.video-info-container .video-info-meta .video-info-detail-content {
    flex: 1;
}
.video-info-detail-list {
    font-size: 13px;
    color: #9499a0;
    display: flex;
    align-items: center;
    justify-self: start;
    height: 24px;
    overflow: hidden;
    box-sizing: border-box;
    
}
.video-info-detail-list, .video-info-detail-list .dm {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
}

.video-info-detail-list .item {
    flex-shrink: 0;
    margin-left: 2px;
    overflow: hidden;
    
}
.at-user-list{
  position: absolute;
  top:30px;
  left: 1px;
  width: 219px;
  max-height: 325px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-self: start;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #e3e4e7;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 10px;
  z-index: 100;
}
.group-name{
  margin-left: 10px;
  font-size: 12px;
}
.group-items{
  margin-left: 0;
}
.item-person:hover{
  background-color:#f1f2f3;
}
.item-avatar {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    pointer-events: none;
}
.item-info {
    font-size: 12px;
    color: #18191C;
    pointer-events: none;
    /* border: 1px solid rebeccapurple; */
}
.item-desc {
    color: #9499A0;
}
.view-icon svg{
  margin-right: 2px;

}
.video-info-detail-list .view .view-icon, .video-info-detail-list .dm .view-icon, .video-info-detail-list .view .dm-icon, .video-info-detail-list .dm .dm-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    margin-left: 0;
   
}
.video-info-detail-list .view, .video-info-detail-list .dm{
    display: inline-flex;
    align-items: center;
}
.video-info-detail-list .view .view-text, .video-info-detail-list .dm .view-text, .video-info-detail-list .view .dm-text, .video-info-detail-list .dm .dm-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.video-info-detail-list .item {
    flex-shrink: 0;
    margin-right: 10px;
    overflow: hidden;
}
.view-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 5px;
}
.video-info-detail-list .pubdate-ip {
    display: flex;
    align-items: center;
    font-size: 13px;
}
.video-info-detail-list .pubdate-ip .pubdate-ip-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* .video-info-detail-list .item:last-child {
    margin-right: 0;
} */

.video-info-detail-list .copyright {
    display: inline-flex;
    align-items: center;
}
.video-info-detail-list .copyright .copyright-icon{
    flex-shrink: 0;
    margin-right: 2px;
    color: #fd676f;
    width: 16px;
    height: 16px;
}
.copyright-text{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#playerWrap{
  height:500px;
}
.player-wrap {
    position: relative;
}
#bilibili-player-placeholder {
    position: absolute;
    display: flex;
    z-index: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    /* flex-wrap: nowrap; */
    box-shadow: 0 0 8px #F1F2F3;
}
#bilibili-player-placeholder-top {
    flex: 1;
    overflow: hidden;
    position: relative;
    background-color: #000;
}
#bilibili-player-placeholder-top video {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}
#bilibili-player-placeholder-bottom {
    position: relative;
    display: flex;
    height: 6vh;
    min-height: 30px;
    align-items: center;
    padding: 0 12px;
    background: #fff;
}
.player-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}

.bpx-player-video-info{
  -webkit-box-align: center;
  color: #505050;
  display: flex;
  flex-shrink: 1;
  height:16px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  font-size: 13px;
  
}
.bpx-player-dm-root{
  align-items: center;
  width: 535px;
  display: flex;
  flex: auto;
  gap: 15px;
  height: 34px;
  margin-left:15px;
}
.bpx-video-inputbar-wrap{
  width: 100%;
  height:95%;
  min-height: 30px;
  border-radius: 8px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: #f4f4f4;
}
.player-dm-input{
  background: none;
  border: 0;
  box-sizing: border-box;
  color: #212121;
  height: 28px;
  line-height: 28px;
  min-width: 50px;
  padding: 0 5px;
  width: 60%;
}
.player-dm-input:focus{
  outline: none;
  border: none;
}
.player-dm-hint{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  height:28px;
  font-size: 12px;
  margin-right: 2px;
  white-space: nowrap;
}
.bui-button{
  border-radius: 0 8px 8px 0;
  height: 100%;
  min-width: 62px;
  width: 62px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #00AEEC;
  color: #fff;
}
 #pub .active {
    background-color: #00AEEC;
}
.video-tag-container {
    padding-bottom: 6px;
    margin: 16px 0 20px 0;
    border-bottom: 1px solid #E3E5E7;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.video-tag-container .tag-panel {
    transition: height 0.3s;
    overflow: hidden;
}
.video-tag-container .tag-panel .tag {
    float: left;
    margin: 0 12px 8px 0;
}
.video-tag-container .tag-panel .tag-link {
    color: #61666D;
    background: #F1F2F3;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    font-size: 13px;
    padding: 0 12px;
    box-sizing: border-box;
    transition: all 0.3s;
    display: inline-flex
;
    align-items: center;
    cursor: pointer;
}
.video-desc-container{
    margin: 16px 0;
}
.video-toolbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 12px;
    line-height: 28px;
    border-bottom: 1px solid #E3E5E7;
}
.video-toolbar-container .video-toolbar-left {
    position: relative;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
}
.video-toolbar-container .video-toolbar-left .video-toolbar-left-main{
    position: relative;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
}
.video-toolbar-container .video-toolbar-left .toolbar-left-item-wrap {
    position: relative;
    margin-right: 8px;
}
.video-toolbar-left-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100px;
    white-space: nowrap;
    transition: all 0.3s;
    font-size: 13px;
    color: #61666D;
    font-weight: 500;
    cursor: pointer;
}
.video-toolbar-left-item:hover{
    color: #00AEEC;
}
.video-like{
  color: #00AEEC !important;
  fill: #00AEEC !important;
}
.video-svg-like svg{
  color: #00AEEC !important;
  fill: #00AEEC !important;
}
.video-toolbar-left-item .video-toolbar-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
}
.toolbar-left-item-wrap span{
  font-size: 13px;
  color: #61666D;
  font-weight: 500;
  cursor: pointer;
}
.video-toolbar-container .video-toolbar-right {
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 20px;
}
.video-toolbar-container .video-toolbar-right .toolbar-right-ai, .video-toolbar-container .video-toolbar-right .toolbar-right-complaint {
    margin-right: 18px;
}
.video-ai-assistant.minisize .video-ai-assistant-icon{
  margin-right: 0px;
}
.video-ai-assistant .video-ai-assistant-icon{
    width: 18px;
    height: 18px;
    margin-right: 4px;
}
.video-toolbar-right-item .video-toolbar-item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 6px;
}
svg:not(:root) {
    overflow: hidden;
}
.video-ai-assistant .video-ai-assistant-bg{
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: calc(100% + 2px);
    box-sizing: border-box;
}
.video-ai-assistant.minisize .video-ai-assistant-bg .video-ai-assistant-badge {
    top: -16px;
    right: -23px;
}

.video-ai-assistant .video-ai-assistant-bg .video-ai-assistant-badge {
    position: absolute;
    z-index: 1;
    top: -14px;
    right: -13px;
    padding: 3px 4px;
    border-radius: 6px;
    background-color: #F1F2F3;
    border: 1px solid #E3E5E7;
    color: #61666D;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}
.video-ai-assistant {
    position: relative;
    z-index: 60;
    padding: 0 6px;
    box-sizing: border-box;
}
.video-ai-assistant.minisize .video-ai-assistant-info{
    text-indent: -9999px;
}
.video-ai-assistant .video-ai-assistant-info{
    color: #00AEEC;
    background: linear-gradient(93deg, #45aee4 0%, #5b8ce7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.video-toolbar-right-item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #61666D;
    transition: all .3s;
    cursor: pointer;
}
.video-desc-container .basic-desc-info {
    white-space: pre-line;
    letter-spacing: 0;
    color: #18191C;
    font-size: 15px;
    line-height: 24px;
    overflow: hidden;
    word-break: break-all;
    line-break: anywhere;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.video-desc-container .basic-desc-info {
    white-space: pre-line;
    letter-spacing: 0;
    color: #18191C;
    font-size: 15px;
    line-height: 24px;
    overflow: hidden;
    word-break: break-all;
    line-break: anywhere;
}
.up-info-container{
  box-sizing: border-box;
  height: 104px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-self: start;
  /* border: 1px solid #E3E5E7; */
}
.up-info-left{
  align-self: center;
  margin-left: 0;
}
.up-avatar-wrap{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.up-avatar-wrap img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.up-info-right{
  margin-left: 12px;
  flex: 1;
  overflow: hidden; 
  /* border: 1px solid #E3E5E7; */
}
.up-info-container .up-info--right .up-info__detail{
    margin-bottom: 5px;
}
.up-detail .up-detail-top{
    display: flex;
    align-items: center;
}
@media (min-width: 1681px) {
    .up-description{
        font-size: 14px;
    }
}
.up-description{
    width: 320px;
    margin-top: 2px;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    color: #9499A0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.up-name{
  font-size: 16px;
  color: #18191C;
  font-weight: 400;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 12px;
  /* border: 1px solid #00AEEC; */
}
.fans-area{
  clear: both;
  display: flex;
  margin-top: 5px;
  white-space: nowrap;
  align-items: center;
  /* border: 1px solid #E3E5E7; */
}
.money-btn{
  background-color: transparent;
  border:1px solid #FF6699;
  margin-right: 12px;
  flex-shrink: 0;
  width: 109px;
  box-sizing: border-box;
  padding: 0;
  line-height: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.money-btn span{
  color: #FF6699;
}
.charge-btn-icon{
  width: 20px;
  height: 20px;
  margin-right: 4px;
  display: flex
}
.charge-btn-icon img{
  width: 100%;
  height: 100%;
}
.follow-btn{
  width: 200px;
  height: 30px;
  border-radius: 6px;
  background: #00AEEC;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.follow-btn span{
  color: #fff;
}
.has-follow-btn{
  width: 200px;
  height: 30px;
  border-radius: 6px;
  background: #E3E5E7;
  color: #9499A0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.follow_dropdown{
  display: flex;
  flex-direction: column;
  height: 70px;
  margin: 5px auto;
  background: #fff;
  /* border: 1px solid #00AEEC; */
}
.follow_dropdown span{
  /* line-height: 40px; */
  width: 100%;
  height: 50%;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  color: #18191C;
  margin: 0 auto;
}
.follow_dropdown span:hover{
  background-color: #E3E5E7;
}
.comment-header{
  width: 100%;
  margin-bottom: 20px;
}
#title {
  align-items: center;
  display: flex;
  font-size: 12px;
}
#title h2 {
    color: #18191C;
    font-weight: 500;
    font-size:20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#navbar {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    justify-self: start;
}
#comment-area {
    position: relative;
    width: calc(100% - 80px);
}
.comment-count{
  margin: 0px 30px 0px 6px;
  font-size: 13px;
  font-weight: 400;
  color: #9499A0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}
.comment-filter{
  font-size: 13px;
  margin-left: 20px;
}
.sort-action{
  width: 100px;
  color: #9499A0;
  font-size: 13px;
  height: 28px;
  display: flex;
  align-self:center;
  justify-content: center;
  position: relative;
  top:4px;
  cursor: pointer;
  /* border: 1px solid red; */
}
.sort-action :first-child{
  color: #18191C;
}
.sort-action .new{
  padding-right: 5px;
}
#sort-actions .sort-div {
    height: 11px;
    margin: 0px 3px;
    border-left: solid 1px #9499A0;
    /* vertical-align: -2px; */
    position: relative;
    top: 5px;
}
.sort-action span{
  padding: 0 3px;
  font-size: 15px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sort-action span:hover{
  color: #00AEEC;
}
.editbox{
  margin: 10px 20px 20px 10px;
  display: flex;
  align-items: flex-start;
}

#user-avatar {
    flex-shrink: 0;
    width: 80px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#body {
    width: 100%;
    transition: height 0.2s;
}
#footer {
    position: relative;
    margin-top: 10px;
    display: flex;
    align-items: center;
}
#input {
    min-height: 32px;
    max-height: 100px;
    line-height: 32px;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    color: #18191C;
    outline: none;
    border: none;
    background-color: transparent;
}
#input:focus {
    outline: none;
    border: none;
}
#editor {
    width: 100%;
    padding: 8px 0;
    border: 1px solid #F1F2F3;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #F1F2F3;
    transition: 0.2s;
    cursor: text;
}
#editor:hover, #editor.active {
    background-color: #fff;
    border-color: #C9CCD0;
}
.notLogin-editbox{
  margin-top: 5px;;
  height:50px;
  display: flex;
  gap:10px;
}
#title {
    width: 100%;
    height: 41px;
    padding: 12px;
    color: #61666D;
    font-size: 12px;
    box-sizing: border-box;
}
#content {
    max-height: 282px;
}

.item {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 12px;
    margin: 4px 0;
    cursor: pointer;
    box-sizing: border-box;
}
.tool-btn {
    outline: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 32px;
    height: 26px;
    border: 1px solid #F1F2F3;
    background-color: #fff;
    border-radius: 4px;
    color: #61666D;
    cursor: pointer;
    margin-right: 6px;
}
#pub {
    height: 32px;
    width: 70px;
    margin-left: auto;
}
#pub button {
    cursor: pointer;
    border-radius: 4px;
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    font-size: 16px;
    color: #fff;
    background-color: rgba(0,174,236,0.5);
}
.notLogin-editbox img{
  border-radius: 50%;
}
.notLogin-editbox .edit{
  flex: 1 1 0%;
  height: 100%;
  border-radius: 6px;
  font-size: 12px;
  color: #9499A0;
  background-color: #F1F2F3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notLogin-editbox button{
  background-color: #00AEEC;
  color: white;
  border: none;
  border-radius: 4px;
}
.listbox{
  margin-bottom: 10px;
  margin-left: 15px;
  /* border: 1px solid #C0C5CC; */
}
.top-level{
  margin: 3px 10px;
  display: flex;
  /* border: 1px solid green; */
  gap:10px;
}
.listbox-comment-info{
  padding-bottom: 4px;
  width: 90%;
  border-bottom: 1px solid #E3E5E7

}
.listbox-comment-info .comment-info-publisher{
  color: #FB7299;
  font-size: 13px;
  font-weight: 500;
  
}
.listbox-comment-info .listbox-comment-context{
  font-size: 15px;
  line-height: 24px;
  color: #18191C;
  width: 100%;
  display: block;
  overflow: hidden;
}
.listbox-bottom{
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 3px;
  font-size: 13px;
  color: #9499A0;
  gap: 20px;
}
.listbox-bottom .like{
  display: flex;
  align-items: center;
  gap:5px;
  cursor: pointer;
  }
.listbox-bottom .like:hover{
  color: #00AEEC;
  }
.listbox-bottom svg :hover{
  fill:  #00AEEC;
  }
.listbox-bottom .dislike{
  display: flex;
  align-items: center;
  gap:5px;
  cursor: pointer;
}
.listbox-bottom .dislike:hover{
  color: #00AEEC;
  
  }
.listbox-bottom .reply{
 cursor: pointer;
}
.listbox-bottom .reply:hover{
  color: #00AEEC;
  }
.replybox{
  margin: 10px 0 20px 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
}
.replybox-middle {
  width: 75%;
}
.rec-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  margin-bottom: 12px;
}
.title-txt{
  font-size: 15px;
  font-weight: 400;
  color: #18191C;
} 
.continuous-btn{
  cursor: pointer;
  display: flex;
  align-items: center;
  gap:5px;
}
@media screen and (min-width: 1500px) {
    #playerWrap{
       height:680px;
       
}
}
</style>